<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="payTable">
            <div class="trendTop">套餐列表({{ total }})</div>
            <div class="tableCont">
              <div class="tableSerchCont">
                <div class="serchItem">
                  <el-input v-model="serchVal" placeholder="请输入套餐名称"></el-input>
                </div>
                <div class="headBtn">
                  <btn value="搜索" @click="serchFn"></btn>
                </div>
                <div class="headBtn">
                  <btn value="新增" @click="addFn"></btn>
                </div>
              </div>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="package_name"
                  width="200"
                  show-overflow-tooltip
                  label="套餐昵称"
                >
                </el-table-column>
                <el-table-column
                  prop="package_cover"
                  label="套餐封面"
                >
                <template slot-scope="scope">
                  <img style="height: 40px;" :src="scope.row.package_cover+ossSrc" />
                </template>
                </el-table-column>
                <el-table-column
                  prop="package_income"
                  label="套餐收益"
                >
                </el-table-column>
                <el-table-column
                  prop="package_sale"
                  label="套餐销量"
                >
                </el-table-column>
                <el-table-column
                  prop="package_price"
                  label="套餐单价"
                >
                </el-table-column>
                <el-table-column
                  prop="pay_money"
                  label="套餐状态"
                >
                <template slot-scope="scope">
                  <div class="ctrolBtn">
                    <div class="greenBtn" v-if="scope.row.package_status==1">正常</div>
                    <div class="redBtn" v-if="scope.row.package_status==2">禁用</div>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  width="200"
                  label="操作">
                  <template slot-scope="scope">
                    <div class="ctrolBtn">
                        <div class="text_btn redBtn" @click="delFn(scope.row)">删除</div>
                        <div class="text_btn blueBtn" @click="editFn(scope.row)">编辑</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="per_page"
                  :current-page="page"
                  @current-change="pageFn"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    import {Package,packDel} from "@/http/api"
  
    export default {
      components: {leftcont,topcont,btn},
      data() {
        return {
          serchVal:'',
          
  
          tableData:[],
          page:1,
          per_page:5,
          total:0,
        }
      },
      props: {},
      methods:{
        addFn(){
            this.$router.push({path:'/cateAdd'})
        },
        delFn(item){
          this.$confirm('确定删除此套餐吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let data ={
                package_id:item.package_id,
              }
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
              });
              packDel(data).then((res)=>{
                if(res.data.code==1){
                  this.$message({
                    type: 'success',
                    message: res.data.msg
                  });
                  this.getdata()
                }else{
                  this.$message(res.data.msg)
                }
                loading.close()
              }).catch((err)=>{
                loading.close()
                this.$message('服务器请求超时');
              })
            })
        },
        pageFn(index){
          this.page = index
          this.getdata()
        },
        serchFn(){ 
          this.page = 1
          this.total = 0
          this.getdata()
        },
        editFn(item){
          this.$router.push({path:'/cateEdit',query:{id:item.package_id}})
        },
        getdata(){
          var data ={
            package_name:this.serchVal,
            page:this.page,
            per_page:this.per_page,
          }
          Package(data).then((res)=>{
            if(res.data.code==1){
              this.tableData = res.data.data.data //把最新的数组赋值给tableData
              this.total = res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        }
      },
      mounted(){
      },
      created() {
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .payTable{
            margin-top: 20px;
            width: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            .trendTop{
              font-weight: bold;
              font-size: 16px;
              cursor: pointer;
            }
            .tableCont{
              width: 100%;
              margin-top: 15px;
              .redBtn{
                  color: #F56C6C;
                }
                .blueBtn{
                  color: #96A1FE;
                }
                .greenBtn{
                  color: #85CE61;
                }
                .blackBtn{
                  color: #666;
                }
              .tableSerchCont{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 10px;
                .serchItem{
                  width: 150px;
                  margin-left: 10px;
                }
                .headBtn{
                  margin-left: 10px;
                }
              }
              .ctrolBtn{
                display: flex;
                .text_btn{
                  margin: 0 5px;
                  cursor: pointer;
                  font-size: 14px;
                }
                
  
              }
              .pageCont{
                padding: 30px 0;
                display: flex;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  </style>
  